<template>
  <el-row :gutter="20">
    <el-col :span="11">
      <el-card>
        <el-row :gutter="20" class="mb-20px">
          <el-col :span="18">
            <el-input v-model.trim="form.configName" placeholder="请输入方案名称" />
          </el-col>
          <el-col :span="3">
            <el-button @click="handleSavePlan" type="primary">保存方案</el-button>
          </el-col>
          <el-col :span="2">
            <el-button @click="goBack">取消</el-button>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="18">
            <label class="text-14px text-#172b4d">客服简介</label>
            <Editor v-model="form.content" height="415px" />
          </el-col>
        </el-row>
      </el-card>
    </el-col>
    <el-col :span="13">
      <el-card>
        <div class="realTime">
          <div class="realTitle">
            <label class="avatar"></label>
            <div class="echo"> 客服名称 </div>
          </div>
          <div class="realContent">
            <div class="realTxt"> 聊天窗口 </div>
            <div class="realIntro" v-html="form.content"></div>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import * as introconfigConfigApi from '@/api/service/introconfig/index'
defineOptions({ name: 'ServiceIntroConfigConfig' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const form = reactive({
  configName: '',
  content: ''
})

/** 保存方案 */
const handleSavePlan = async () => {
  if (form.configName == '') {
    ElMessage.warning('请输入方案名称')
    return
  }
  if (form.content == '') {
    ElMessage.warning('请输入客服简介')
    return
  }
  try {
    const data = JSON.parse(JSON.stringify(form))
    if (form.id) {
      await introconfigConfigApi.introConfigUpdate(data)
      message.success(t('common.updateSuccess'))
    } else {
      await introconfigConfigApi.introConfigCreate(data)
      message.success(t('common.createSuccess'))
    }
    goBack()
  } finally {
  }
}

/** 初始化 */
const route = useRoute()
onMounted(() => {
  if (JSON.stringify(route.query) !== '{}') {
    const data = route.query
    getIntroConfigDetail(data.id)
  }
})
const getIntroConfigDetail = async (id) => {
  const data = await introconfigConfigApi.getIntroConfig(id)
  form.configName = data.configName
  form.content = data.content
  form.id = data.id
}
/** 取消按钮 */
const router = useRouter()
const goBack = () => {
  router.push({
    path: '/service/service-system-config',
    query: {
      keys: Math.ceil(Math.random() * 100)
    }
  })
}
</script>
<style lang="scss" scoped>
.realTime {
  width: 840px; //579
  min-height: 607px;
  border: 2px solid #f0f0f0;
  border-radius: 20px;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border: 1px solid #f5f5f5;
  .realTitle {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 20px;
    .avatar {
      display: inline-block;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #268;
    }
    .echo {
      margin: 0;
      padding: 10px;
      font-size: 14px;
      line-height: 20px;
      width: calc(100% - 52px - 10px);
      color: var(--el-text-color-regular);
    }
  }
  .realContent {
    width: 100%;
    height: 556px;
    border-top: 1px solid #f5f5f5;
    display: flex;
    .realTxt {
      width: 579px;
      height: 100%;
      border-right: 1px solid #f5f5f5;
      font-size: 28px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
    }
    .realIntro {
      width: calc(100% - 580px);
      height: 100%;
    }
  }
}
</style>
